<!DOCTYPE html>
<html lang="en" xmlns:>
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
    <title>Title</title>
    <!--引入layui的核心样式库-->
    <link rel="stylesheet" href="res/layui/css/layui.css">
</head>
<body>
     <h2>按钮</h2>
     <hr>
     <div class="layui-btn-container">
         <button class="layui-btn layui-bg-green">普通按钮</button>
         <button class="layui-btn layui-bg-blue">蓝色按钮</button>
         <button class="layui-btn layui-bg-orange">橙色按钮</button>
         <button class="layui-btn layui-bg-red">红色按钮</button>
         <button class="layui-btn layui-bg-purple">紫色按钮</button>
         <button class="layui-btn layui-bg-black">黑色按钮</button>
         <button class="layui-btn layui-bg-gray">灰色按钮</button>
         <button class="layui-btn layui-bg-cyan">青色按钮</button>
         <button class="layui-btn layui-btn-disabled">普通按钮</button>
     </div>
     <hr>
     <button class="layui-btn layui-btn-lg">大型按钮</button>
     <button class="layui-btn">普通按钮</button>
     <button class="layui-btn layui-btn-sm">小型按钮</button>
     <button class="layui-btn layui-btn-xs">小型按钮</button>
     <hr>
     <div style="width: 400px">
         <button class="layui-btn layui-btn-fluid layui-btn-radius layui-btn-primary layui-border-blue">流体按钮</button>
     </div>
     <hr>
     <div class="layui-btn-group">
         <button class="layui-btn layui-bg-blue layui-btn-sm">
             <i class="layui-icon layui-icon-about"></i>
             详情
         </button>
         <button class="layui-btn layui-bg-orange layui-btn-sm">
             <i class="layui-icon layui-icon-edit"></i>
             修改
         </button>
         <button class="layui-btn layui-bg-red layui-btn-sm">
             <i class="layui-icon layui-icon-delete"></i>
             删除
         </button>
     </div>

     <h2>字体图标</h2>
     <i class="layui-icon layui-icon-github" style="font-size: 20em"></i>
     <i class="layui-icon layui-icon-login-wechat" style="font-size: 20em;color:#0f0"></i>
     <i class="layui-icon layui-icon-login-weibo" style="font-size: 20em;color:#f00"></i>

     <h2>表格</h2>
     <div class="layui-col-md6 layui-col-md-offset3 layui-col-sm8 layui-col-sm-offset2 layui-col-xs12">
         <table class="layui-table" lay-even lay-skin="nob">
             <tr>
                 <th>表头1</th>
                 <th>表头2</th>
                 <th>表头3</th>
                 <th>表头4</th>
                 <th>表头5</th>
             </tr>
             <tr>
                 <td>单元格1</td>
                 <td>单元格2</td>
                 <td>单元格3</td>
                 <td>单元格4</td>
                 <td>单元格5</td>
             </tr>
             <tr>
                 <td>单元格1</td>
                 <td>单元格2</td>
                 <td>单元格3</td>
                 <td>单元格4</td>
                 <td>单元格5</td>
             </tr>
             <tr>
                 <td>单元格1</td>
                 <td>单元格2</td>
                 <td>单元格3</td>
                 <td>单元格4</td>
                 <td>单元格5</td>
             </tr>
         </table>
     </div>

    <!--layui的核心组件库-->
    <script src="res/layui/layui.js"></script>
    <script>
        layui.use(function (){
            //加载layui弹层模块
            let layer = layui.layer;
            //layer.msg("Hello Layui!")
            //layer.alert("Hello Layui!");
            /*layer.confirm('是否确认删除?',{icon:3},function (index){
                //点击确认按钮，index的值为1
                layer.msg('删除成功---'+index)
            })*/
        })
    </script>
</body>
</html>